import React from "react"
import styled from "styled-components"
import { Line } from "@ant-design/charts"
import { LineConfig } from "@ant-design/charts/es/line"
import dayjs from "dayjs"

const mockWeekData = [10, 6, 7, 7, 0, 1, 1]

const StyledContainer = styled.div``

export const MainChart = () => {
  const lineConfig: LineConfig = {
    xField: "day",
    yField: "log_count_cnt",
    data: mockWeekData.map((it, index) => {
      return {
        day: dayjs()
          .add(index - 7, "day")
          .format("YYYY-MM-DD"),
        log_count_cnt: it,
      }
    }),
    style: {
      height: 300,
    },
  }

  return (
    <StyledContainer className="mb-6 p-5 border bg-white rounded-md mr-2">
      <h3 className="text-lg mb-5">近一周整体日志上报情况</h3>
      <Line {...lineConfig} />
    </StyledContainer>
  )
}
